<template>
  <div class="container pt-60 pb-60">
    <h1>邦女郎明星榜</h1>
    <h5>资深设计管理，提供专业化项目保障</h5>
    <div class="inner">
      <swiper :options="swiperOption" ref="mySwiper" class="inner-swiper">
        <!-- slides -->
        <swiper-slide class="inner-swiper-slide" v-for="(item,index) in stars" v-key="index">
          <div class="origin-content">
            <img :src="item.img"/>
            <div class="company_star_block">
              <h5>{{item.name}}</h5>
              <h6>{{item.year}}</h6>
            </div>
          </div>

          <div class="mask">
            <div class="company_star_zhezhao">
              <div class="company_star_zhezhao_header">
                <img :src="item.img">
              </div>
              <div class="company_star_zhezhao_content">
                <p>{{item.name}}</p>
                <p>{{item.year}}</p>
                <p>{{item.skill}}</p>
              </div>
            </div>
          </div>
        </swiper-slide>

        <!-- Optional controls -->
        <div class="swiper-pagination" slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
        <div class="swiper-scrollbar" slot="scrollbar"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Member.vue",
    methods: {},
    data() {
      return {
        stars: [
          {
            img: require("../../assets/star2.png"),
            name: "金昕",
            year: "10年经验  |  累计项目400+",
            skill: "白丁灯具设计、金太阳教育机器人设计、婺牌茶业包装设计、仙女湖旅游衍生产品设计等。"
          },
          {
            img: require("../../assets/star3.png"),
            name: "王秋辰",
            year: "8年经验  |  累计项目300+",
            skill: "曾服务项目包括：腾讯听听AI智能音箱产品、美团外卖智能蓝牙耳机、猫王口袋电台产品、凯立德车载智能系列产品、万利达儿童教育平板电脑、比亚迪HMI人机界面、BBS音频系列产品等。"
          },
          {
            img: require("../../assets/star4.png"),
            name: "江晓媚",
            year: "10年经验  |  累计项目400+",
            skill: "曾服务项目包括：腾讯路宝盒子、芒果娱乐智能手表、周大福珠宝、齐心办公、名门锁业、雷迪奥光电等。"
          },
          {
            img: require("../../assets/star5.png"),
            name: "蒋建华",
            year: "8年经验  |  累计项目300+",
            skill: "曾服务项目包括：美的多功能早餐机、 新日都市电动车、旺德福实业的木吻餐具、阳光四季新能源的整体楼宇太阳能、飞研智能共享书柜等。"
          },
          {
            img: require("../../assets/star6.png"),
            name: "李臻立",
            year: "6年经验  |  累计项目300+",
            skill: "曾服务项目包括：九阳豆料饭、阿里菜鸟机器人二代、联合利华净水宝、太阳雨母婴饮水机、小吉科技mini-j系列产品设计等。"
          },
          {
            img: require("../../assets/star7.png"),
            name: "黎俊",
            year: "6年经验  |  累计项目200+",
            skill: "曾服务项目包括：听听音响、奥比中光的3D扫描仪、康尚的制氧机、博皓的系列电动牙刷、isk主播系列音频产品、普利优创系列微波治疗仪等。"
          },
          {
            img: require("../../assets/star8.png"),
            name: "劳晖强",
            year: "6年经验  |  累计项目200+",
            skill: "曾服务项目包括：万家乐厨电、云路灯饰、科日电子香薰机、心之力喷雾。"
          },
          {
            img: require("../../assets/star1.png"),
            name: "刘普",
            year: "13年经验  |  累计项目500+",
            skill: "具备资深工业设计及管理经验，曾服务项目包括：LG吸尘器、史密斯热水器、美帝电磁炉、inter笔记本、联想移动硬盘、朵唯手机、方太整体厨房、三兄刀具、九安血压计、华为通信机柜等。"
          },
        ],
        swiperOption: {
          autoplay: false,
          // speed:1000,
          // autoplayDisableOnInteraction : false,//用户操作swiper之后，是否禁止autoplay
          loop: true,
          slideToClickedSlide: true,
          width: 1200,

          slidesPerView: 5,
          centeredSlides: true,

          pagination: '.swiper-pagination',
          paginationClickable: true,//点击分页器是否会切换
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          }
        }
      }
    }
  }
</script>

<style scoped>
  .pt-60 {
    padding-top: 60px;
  }
  .pb-60{
    padding-bottom: 60px;
  }

  .container {
    overflow-y: hidden;
    width: 100%;
    background: #223446;
  }

  h1 {
    font-size: 44px;
    color: #fff;
    margin-bottom: 29px;
    font-weight: 400;
    text-align: center;
  }

  h5 {
    font-size: 22px;
    color: #fff;
    margin-bottom: 50px;
    font-weight: 400;
    text-align: center;
  }

  .inner {
    width: 1200px;
    height: 350px;
    margin: 0 auto;
  }
  .inner-swiper-slide{
    position: relative;
  }
  .inner-swiper-slide img{
    width: 100%;
    height: 100%;
  }
  .company_star_block{
    padding-top: 14px;
    padding-left: 20px;
    box-sizing: border-box;
    height: 80px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background: rgba(0,0,0,.5);
  }
  .company_star_block h6{
    font-weight: 400;
    color: #fff;
    margin: 0;
    text-align: left;
    font-size: 12px;
    margin-top: 10px;
  }
  .company_star_block h5{
    font-weight: 400;
    color: #fff;
    margin: 0;
    text-align: left;
    font-size: 18px;
  }
  .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 300px;
    left: 0;
    right: 0;
    text-align: center;
    -webkit-backface-visibility: hidden; /* 隐藏旋转元素的背面*/
    backface-visibility: hidden;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s linear;
    transition: all 2s cubic-bezier(0.23, 1, 0.32, 1);

    -ms-transform: scaleY(1);
    transform: scaleY(1);
    transform-origin: left bottom;
  }
  .company_star_zhezhao {
    padding-top: 50px;
    box-sizing: border-box;
    width: 240px;
    height: 380px;
    position: absolute;
    top: 0;
    left: 0;
    background: #108bee;
    opacity: .95;
    z-index: 889;
  }
  .company_star_zhezhao_header {
    width: 80px;
    height: 80px;
    box-sizing: border-box;
    margin-left: 80px;
    margin-bottom: 20px;
    border-radius: 100%;
  }
  .company_star_zhezhao_header img {
    border-radius: 100%;
    width: 100%;
  }
  .company_star_zhezhao_content p:nth-child(1) {
    font-size: 18px;
    color: #fff;
    text-align: center;
    transition: .8s;
    left: 95px;
    top: 150px;
  }
  .company_star_zhezhao_content p:nth-child(2) {
    font-size: 12px;
    margin-bottom: 16px;
    text-align: center;
    transition: .8s;
    color: #fff;
  }
  .company_star_zhezhao_content p:nth-child(3) {
    font-size: 12px;
    margin: 0 auto;
    width: 196px;
    height: 118px;
    line-height: 20px;
    transition: .8s;
    color: #fff;
  }
  .inner-swiper-slide:hover .mask {
    opacity: 1;
  }
  .inner-swiper-slide:hover .origin-content {
    opacity: 0;
  }
</style>